<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }}</div>
    <a-alert message="注：优惠券只能抵扣商品金额，最多优惠到0.01元，不能抵扣运费" banner/>
    <div class="table-operator">
      <a-row>
        <a-col :span="6">
          <a-button
              v-if="$auth('/market/coupon/create')"
              type="primary"
              icon="plus"
              @click="handleAdd"
          >新增
          </a-button>
        </a-col>
        <a-col :span="8" :offset="10">
          <a-input-search
              style="max-width: 300px; min-width: 150px;float: right;"
              v-model="queryParam.couponName"
              placeholder="请输入优惠券名称"
              @search="onSearch"
          />
        </a-col>
      </a-row>
    </div>
    <s-table
        ref="table"
        rowKey="id"
        :loading="isLoading"
        :columns="columns"
        :data="loadData"
        :pageSize="15"
        :scroll="{ x: 1500}"
    >
      <!-- 优惠券类型 -->
      <template v-slot:couponType="text">
        <a-tag>{{ CouponType[text].name }}</a-tag>
      </template>
      <!-- 最低消费金额 -->
      <template v-slot:full="text">
        <p class="c-p">¥{{ text }}</p>
      </template>
      <!-- 优惠方式 -->
      <template v-slot:discount="item">
        <template v-if="item.couponType === CouponType.REDUCTION.key">
          <span>立减</span>
          <span class="c-p mlr-2">¥{{ item.amount }}</span>
        </template>
        <template v-if="item.couponType === CouponType.DISCOUNT.key">
          <span>打</span>
          <span class="c-p mlr-2">{{ item.discount }}</span>
          <span>折</span>
        </template>
      </template>
      <!-- 有效期 -->
      <template v-slot:expirationDate="item">
        {{ item.useStart | dayjs }} ~ {{ item.useEnd | dayjs }}
      </template>
      <!-- 状态 -->
      <template v-slot:status="text">
        <a-tag
            :color="text === Status.ENABLED.key ? 'green' : 'red'"
            class="cur-p"
        >
          {{ text === Status.ENABLED.key ? Status.ENABLED.name : Status.DISABLED.name }}
        </a-tag>
      </template>
      <template v-slot:creationTime="text">
        <span>{{ text | dayjs }}</span>
      </template>
      <!-- 操作 -->
      <template v-slot:action="text, item">
        <a v-if="$auth('/market/coupon/detail')" class="mr-5" @click="handleEdit(item)">详情</a>
        <a v-if="item.status === Status.ENABLED.key" v-action:delete @click="handleStop(item)">停用</a>
      </template>
    </s-table>
  </a-card>
</template>

<script>
import * as Api from '@/api/market/coupon'
import {STable} from '@/components'
import {CouponTypeEnum} from '@/common/enum/coupon'
import StatusEnum from '@/common/enum/Status'

export default {
  name: 'Index',
  components: {
    STable
  },
  data() {
    return {
      // 查询参数
      queryParam: {},
      // 正在加载
      isLoading: false,
      // 表头
      columns: [
        {
          title: '优惠券编号',
          dataIndex: 'couponNo'
        },
        {
          title: '优惠券名称',
          dataIndex: 'couponName'
        },
        {
          title: '优惠券类型',
          dataIndex: 'couponType',
          scopedSlots: {customRender: 'couponType'}
        },
        {
          title: '最低消费金额 (元)',
          dataIndex: 'full',
          scopedSlots: {customRender: 'full'}
        },
        {
          title: '优惠方式',
          scopedSlots: {customRender: 'discount'}
        },
        {
          title: '有效期',
          scopedSlots: {customRender: 'expirationDate'}
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: {customRender: 'status'}
        },
        {
          title: '发放总数量',
          dataIndex: 'receiveNum'
        },
        {
          title: '已发放/领取数量',
          dataIndex: 'receivedCount'
        },
        {
          title: '添加时间',
          dataIndex: 'creationTime',
          scopedSlots: {customRender: 'creationTime'}
        },
        {
          title: '操作',
          fixed: 'right',
          scopedSlots: {customRender: 'action'}
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: param => {
        return Api.list({...param, ...this.queryParam})
      }
    }
  },
  created() {
  },
  computed: {
    CouponType() {
      return CouponTypeEnum
    },
    Status() {
      return StatusEnum
    }
  },
  methods: {
    // 新增记录
    handleAdd() {
      this.$router.push('./create')
    },

    // 编辑记录
    handleEdit(item) {
      this.$router.push({path: './detail', query: {id: item.id}})
    },

    // 停用记录
    handleStop(item) {
      const app = this
      const modal = this.$confirm({
        title: '您确定要停用该记录吗?',
        content: '停用后不可恢复',
        onOk() {
          return Api.disabled(item.id)
              .then(result => {
                app.$message.success("操作成功", 1.5)
                app.handleRefresh()
              })
              .finally(result => modal.destroy())
        }
      })
    },

    /**
     * 刷新列表
     * @param {Boolean} bool 强制刷新到第一页
     */
    handleRefresh(bool = false) {
      this.$refs.table.refresh(bool)
    },

    // 检索查询
    onSearch() {
      this.handleRefresh(true)
    }

  }
}
</script>
